<template>
  <div>
    <creat v-if="showcreat" @close="showcreat = false" :detailId="detailId" :type="type" @success="refreshList(pageNo)"></creat>
    <check v-else-if="showcheck" @close="showcheck = false"></check>
    <show v-else-if="show" @close="show = false" :detailId="detailId"></show>
    <div v-else>
      <basic-container>
        <!-- <el-header> -->
        <div class="flex_row" style="align-items: flex-start">
          <el-button size="small" type="success" @click="creatNew()" v-if="permission.cpgl_create">新增</el-button>
          <el-form :inline="true" size="small" class="ml30" ref="form" :model="form" @keyup.enter.native="refreshList()">
            <el-form-item label="产品管理编号:"><el-input placeholder="请输入" v-model="form.number" class="w160"></el-input></el-form-item>
            <el-form-item label="产品名称:"><el-input placeholder="请输入" v-model="form.name" class="w160"></el-input></el-form-item>
            <el-form-item label="产品代码:"><el-input placeholder="请输入" v-model="form.code" class="w160"></el-input></el-form-item>
            <el-form-item label="规格型号:"><el-input placeholder="请输入" v-model="form.skus" class="w160"></el-input></el-form-item>
            <el-form-item label="产品类别:">
              <el-select v-model="form.productType" class="w160">
                <el-option label="耗材" :value="0"></el-option>
                <el-option label="设备" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <block v-if="showmore">
              <el-form-item label="器械类别:">
                <el-select v-model="form.instrumentType" class="w160">
                  <el-option label="器械" :value="0"></el-option>
                  <el-option label="体外诊断试剂" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="能量供应类别:">
                <el-select v-model="form.supplyCategory" class="w160">
                  <el-option label="有源医疗器械" :value="0"></el-option>
                  <el-option label="无源医疗器械" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="微生物灭活:">
                <el-select v-model="form.microbialInactivation" class="w160">
                  <el-option label="无菌医疗器械" :value="0"></el-option>
                  <el-option label="非无菌医疗器械" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="植入/非植入:">
                <el-select v-model="form.implantType" class="w160">
                  <el-option label="植入性医疗器械" :value="0"></el-option>
                  <el-option label="非植入性医疗器械" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="注册证编号/备案凭证编号:"><el-input placeholder="请输入" v-model="form.recordNumber" class="w160"></el-input></el-form-item>
              <el-form-item label="管理部门:">
                <el-cascader
                  class="w160"
                  placeholder="请选择"
                  ref="newdept"
                  :options="deptOption"
                  v-model="form.manageDeptId"
                  :show-all-levels="false"
                  :props="{
                    value: 'id',
                    label: 'deptName',
                    emitPath: false,
                    checkStrictly: true,
                  }"
                  filterable
                ></el-cascader>
              </el-form-item>
              <el-form-item label="负责人:">
                <el-select class="w160" v-model="form.manageUserId" filterable placeholder="请选择">
                  <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="记录保留期限(年):"><el-input placeholder="请输入" v-model="form.retentionPeriod" class="w160"></el-input></el-form-item>
              <el-form-item label="编制部门:">
                <el-cascader
                  class="w160"
                  placeholder="请选择"
                  ref="newdept"
                  :options="deptOption"
                  v-model="form.createDept"
                  :show-all-levels="false"
                  :props="{
                    value: 'id',
                    label: 'deptName',
                    emitPath: false,
                    checkStrictly: true,
                  }"
                  filterable
                ></el-cascader>
              </el-form-item>
              <el-form-item label="编制人:">
                <el-select class="w160" v-model="form.createUser" filterable placeholder="请选择">
                  <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="提交日期:">
                <el-date-picker class="w140" v-model="form.beginSubmitDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"></el-date-picker>
                -
                <el-date-picker class="w140" v-model="form.endSubmitDate" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="批准日期:">
                <el-date-picker class="w140" v-model="form.beginApproveDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"></el-date-picker>
                -
                <el-date-picker class="w140" v-model="form.endApproveDate" type="date" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
              </el-form-item>
            </block>
            <el-form-item>
              <el-button type="primary" @click="refreshList(1)">查询</el-button>
              <el-button type="default" plain @click="resetSearch">重置</el-button>
              <el-button type="primary" plain @click="showmore = !showmore">
                更多筛选条件
                <i :class="{ 'el-icon-arrow-down': !showmore, 'el-icon-arrow-up': showmore }"></i>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- </el-header> -->
      </basic-container>
      <basic-container>
        <el-table ref="table" :data="tableData" :height="$height - 290 + 'px'" v-loading="loading" @row-click="rowClick">
          <el-table-column type="expand" width="1">
            <template slot-scope="scope">
              <div class="flex_row" style="margin-left: 140px">
                <table class="">
                  <tr v-for="item in scope.row.productList" :key="item.id">
                    <td width="140">
                      <el-tooltip effect="dark" :content="item.name" placement="top-start">
                        <div class="cell overell pointer" style="width: 140px">{{ item.name }}</div>
                      </el-tooltip>
                    </td>
                    <td width="80">
                      <el-tooltip effect="dark" :content="item.code" placement="top-start">
                        <div class="cell overell pointer" style="width: 80px">{{ item.code }}</div>
                      </el-tooltip>
                    </td>
                    <td width="80">
                      <el-tooltip effect="dark" :content="item.skus" placement="top-start">
                        <div class="cell overell pointer" style="width: 80px">{{ item.skus }}</div>
                      </el-tooltip>
                    </td>
                    <td width="80" class="cell">{{ item.productType == 0 ? '耗材' : '设备' }}</td>
                    <td width="80" class="cell">{{ item.instrumentType == 0 ? '器械' : '体外诊断试剂' }}</td>
                    <td width="120" class="cell">{{ item.supplyCategory == 0 ? '有源医疗器械' : '无源医疗器械' }}</td>
                    <td width="100" class="cell">{{ item.microbialInactivation == 0 ? '无菌医疗器械' : '非无菌医疗器械' }}</td>
                    <td width="110" class="cell">{{ item.implantType == 0 ? '植入性医疗器械' : '非植入性医疗器械' }}</td>
                    <td width="160" class="cell">{{ item.recordNumber || '-' }}</td>
                  </tr>
                </table>

                <div>
                  <div class="flex_center" style="width: 220px" v-for="(item, i) in scope.row.jiluFileList" :key="i">
                    <el-tooltip effect="dark" :content="item.name" placement="top-start">
                      <div class="cell overell pointer" style="width: 110px">{{ item.name }}</div>
                    </el-tooltip>
                    <el-tooltip effect="dark" :content="item.serialNumber" placement="top-start">
                      <div class="cell overell pointer" style="width: 110px">{{ item.serialNumber }}</div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="number" width="140" label="产品管理编号"></el-table-column>
          <el-table-column prop="name" label="产品名称" width="140" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="pointer main_co" v-if="!scope.row.expansion" @click="toogleExpand(scope.row)">
                展开全部
                <i class="el-icon-arrow-right ml0 main_co"></i>
              </span>
              <span class="pointer main_co" v-else @click="toogleExpand(scope.row)">
                收起全部
                <i class="el-icon-arrow-down ml0 main_co"></i>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="产品代码" show-overflow-tooltip></el-table-column>
          <el-table-column label="规格型号" show-overflow-tooltip></el-table-column>
          <el-table-column label="产品类别" show-overflow-tooltip></el-table-column>
          <el-table-column label="器械类别" show-overflow-tooltip></el-table-column>
          <el-table-column label="能量供应类别" show-overflow-tooltip width="120"></el-table-column>
          <el-table-column label="微生物灭活" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column label="植入/非植物" show-overflow-tooltip width="110"></el-table-column>
          <el-table-column label="注册证号/备案证号" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column label="记录文件名称" width="110" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="记录流水编号" width="110" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="manageDeptName" label="管理部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="manageUserName" label="负责人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="retentionPeriod" label="记录保存年限(年)" width="130"></el-table-column>
          <el-table-column prop="createDeptName" label="编制部门" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createUserName" label="编制人" show-overflow-tooltip></el-table-column>
          <el-table-column label="提交时间" prop="createTime" width="160"></el-table-column>
          <el-table-column label="批准日期" width="100">
            <template slot-scope="scope">
              {{ scope.row.beginTime.substr(0, 10) || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="工作流状态" fixed="right" width="120">
            <template slot-scope="scope">
              <span :class="processStatusList[scope.row.processStatus].class">
                {{ scope.row.processStatus >= 0 ? processStatusList[scope.row.processStatus].text : '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" fixed="right" width="260">
            <template slot-scope="scope">
              <span class="pointer main_co f14" v-if="permission.cpgl_show" @click="handleShow(scope.row)">查看</span>
              <span class="pointer main_co f14 ml30" v-if="scope.row.ishasDecrypt != 1 && userInfo.user_id == scope.row.createUser" @click="creatNew(scope.row, 2)"> 快捷新增 </span>
              <span class="pointer main_co f14 ml30" @click="applyShow(scope.row)" v-if="scope.row.ishasDecrypt == 1">解密</span>
              <span class="pointer red_f f14 ml30" v-if="permission.cpgl_del && scope.row.processStatus == 7 && userInfo.user_id == scope.row.createUser && scope.row.isShowDel == 1" @click="confirmDel(scope.row)"> 删除 </span>
              <span class="pointer main_co f14 ml30" v-if="userInfo.user_id == scope.row.createUser && permission.cpgl_create && scope.row.isDeleted == '0' && (scope.row.processStatus == 4 || scope.row.processStatus == 5 || scope.row.processStatus == 6)" @click="creatNew(scope.row, 1)"> 修改 </span>
            </template>
          </el-table-column>
          <empty slot="empty"></empty>
        </el-table>
        <el-card class="pub_right">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo" :page-size="pageSize" :total="total" background layout="total, prev, pager, next, jumper"></el-pagination>
        </el-card>
      </basic-container>
    </div>
  </div>
</template>

<script>
import { getguifanList } from '@/api/myapi/tixiwenjian'
import creat from './creat.vue'
import check1 from './check1.vue'
import check from './check.vue'
import show from './show.vue'
export default {
  components: {
    creat,
    check1,
    check,
    show,
  },
  data() {
    return {
      type: 0,
      tableData: [],
      detailId: '',
      showcreat: false,
      showupgrade: false,
      showcheck: false,
      showmore: false,
      show: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      system: 'productprocess',
      form: {},
    }
  },
  created() {
    this.refreshList(1)
    this.getdeptlist()
    this.getAlluser()
  },
  methods: {
    // 新建文件
    creatNew(row, type) {
      if (row) {
        this.type = type
        this.detailId = row.id
      } else {
        this.type = 0
        this.detailId = ''
      }
      this.showcreat = true
    },
    // 获取数据列表
    refreshList(pageNo) {
      this.showcreat = false
      this.showupgrade = false
      this.loading = true
      this.pageNo = pageNo
      getguifanList(
        {
          current: pageNo,
          size: this.pageSize,
          descs: 'create_time',
          ...this.form,
        },
        this.system
      ).then(({ data }) => {
        if (data && data.success) {
          this.tableData = data.data.records
          this.total = data.data.total
          this.loading = false
        }
      })
    },
    resetSearch() {
      this.form = {}
      this.pageNo = 1
      this.refreshList(this.pageNo)
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.refreshList(val)
    },
  },
}
</script>

<style scoped="scoped">
::v-deep .el-table__expand-icon {
  font-size: 0;
}
</style>
